<template>
  <div>
    <pageTop :text="text"></pageTop>
    <div @click="blank">
      <slideBar></slideBar>
      <div style="width: 100vw;height: 356vh;overflow: hidden" @click="blank" >
        <iframe src="http://www.napin.com/download.html" height="100%" width="100%"  frameborder="0"></iframe>
        <!--<div style="width: 100vw;height: 336vh;background: none;position: relative;top: -634vw;" @click="blank"></div>-->
        <div style="width: 100vw;height: 20vh;background: none;position: relative;top: -37vw;" @click="gostop"></div>
      </div>
    </div>
    <gotop></gotop>
  </div>
</template>

<script>
  import pageTop from '../components/pageTop'
  import slideBar from '../components/slideBar'
  import gotop from '../components/public/goTop'
  import pageBottom from '../components/pageBottom'
    export default {
        name: "APP",
      components:{
        slideBar,
        pageTop,
        gotop:gotop,
        pageBottom
      },
      data() {
        return {
          text:'APP下载',
          url1:''
        }
      },
      methods:{
        gostop(){
          let timer=null,_that=this;
          cancelAnimationFrame(timer)
          timer=requestAnimationFrame(function fn(){
            if(_that.scrollTop>0){
              _that.scrollTop-=120;
              document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
              timer=requestAnimationFrame(fn)
            }else {
              cancelAnimationFrame(timer);
              _that.goTopShow=false;
            }
          })
        },
        handleScroll () {
          this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          if(this.scrollTop>500){
            this.goTopShow=true
          }
        },
        backtop(){
            let timer=null,_that=this;
            cancelAnimationFrame(timer)
            timer=requestAnimationFrame(function fn(){
              if(_that.scrollTop>0){
                _that.scrollTop-=90;
                document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
                timer=requestAnimationFrame(fn)
              }else {
                cancelAnimationFrame(timer);
                _that.goTopShow=false;
              }
            })
          },
        blank(){
          $("#containers").css(
            {"transform":"translateX(0vw)","transition":"transform .5s"});
        },
        menu(){
          $("#containers").css(
            {"transform":"translateX(72vw)","transition":"transform .5s"});
        },
        /*backTop(){
          $('.container').animate({scrollTop:0},500);
         }*/
      },
      mounted() {
        this.url1 = 'http://www.napin.com/download.html'
        window.addEventListener('scroll', this.handleScroll);
      },
      destroyed(){
        window.removeEventListener('scroll', this.handleScroll)
      }
    }
</script>

<style scoped>

  .top{
    width:100vw;
    height:141.87vw;
    background:#F78032;
    padding-top:19.2vw;
    box-sizing:border-box;

  }
  .top .napin{
    width:32.27vw;
    height:32.27vw;
    margin:0px auto;
    /*margin-top:19.2vw;*/
  }
  .top a{

    width:100%;
    height:100%;
    display:inline-block;

  }
  .top .text{
    width:69.33vw;
    height:23.4vw;
    margin:0px auto;
    margin-top:6.13vw;
  }
  .ios,.android{
    width:58.67vw;
    height:15.27vw;
    margin:0px auto;
  }
  img{
    width:100%;
    height:100%;
    display:inline-block;
  }
  .body{
    width:100vw;
    height:149.33vw;
  }
  .club{
    width:100vw;
    height:149.33vw;
    background:#F6F8FA;
    padding-top:14.5vw;
    box-sizing: border-box;
  }
  .club p{
    width:54.67vw;
    height:23.4vw;
    color:#333;
    font-size:15px;
    margin-left:7.2vw;
    text-indent:24px;
    float:left;
    text-align: left;
  }
  .club .clubImg{
    width:20vw;
    height:20vw;
    float:right;
    margin-top:1vw;
    margin-right:7.13vw;
  }
  .content{
    width:100vw;
    height:151.47vw;
  }
  .bottom{
    width:100vw;
    height:28.17vw;
    background:#F78032;
    box-sizing: border-box;
  }
  .bottom .blank{
    width:35.73vw;
    height:1.3vw;
    background:#fff;
    border-radius:5px;
    margin:0px auto;
  }
  @media screen and ( max-width: 375px)and (min-width: 320px){
    .club p{
      font-size: 13px !important;
    }
    .head{
      font-size: 18px !important;
    }
  }
</style>
